<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 面包屑 -->
        <div slot="header" v-if="subject.id && subject.name">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>学科管理</el-breadcrumb-item>
            <el-breadcrumb-item>{{ subject.name }}</el-breadcrumb-item>
            <el-breadcrumb-item>目录管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!-- 搜索 -->
        <el-row>
          <el-form :inline="true" label-width="80px" size="small">
            <el-col :span="18">
              <el-form-item label="目录名称">
                <el-input v-model="params.directoryName"></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model="params.state">
                  <el-option label="启用" :value="1"></el-option>
                  <el-option label="禁用" :value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item style="text-align: right">
                <el-button @click="clear()">清除</el-button>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="6" style="text-align: right">
              <el-button
                v-if="subject.id && subject.name"
                type="text"
                icon="el-icon-back"
                @click="$router.back()"
                >返回学科</el-button
              >
              <el-button
                icon="el-icon-edit"
                type="success"
                size="small"
                style="text-align: right"
                @click="openDialog()"
                >新增目录</el-button
              >
            </el-col>
          </el-form>
        </el-row>

        <!-- 数据记录 -->
        <el-alert
          style="margin-bottom: 15px"
          :title="`数据一共 ${total} 条`"
          type="info"
          show-icon
          :closable="false"
        >
        </el-alert>

        <!-- 表格 -->
        <el-table :data="directorysList">
          <el-table-column label="序号" type="index" width="80px">
          </el-table-column>
          <el-table-column prop="subjectName" label="所属学科">
          </el-table-column>
          <el-table-column prop="directoryName" label="目录名称">
          </el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column>
          <el-table-column label="创建日期">
            <template #default="{ row }">
              {{ row.addDate | parseTimeByString }}
            </template>
          </el-table-column>
          <el-table-column prop="totals" label="面试题数量"> </el-table-column>
          <el-table-column prop="state" label="状态">
            <template #default="{ row }">{{
              row.state === 1 ? "已启用" : "已禁用"
            }}</template>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template #default="{ row }">
              <el-button type="text" @click="toggleState(row)">{{
                row.state === 1 ? "禁用" : "启用"
              }}</el-button>
              <el-button
                type="text"
                @click="openDialog(row)"
                :disabled="row.state === 1"
                >修改</el-button
              >
              <el-button
                type="text"
                @click="deleteDir(row)"
                :disabled="row.state === 1 || row.totals > 0"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          style="margin-top: 20px; text-align: right"
          background
          :current-page="params.page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="params.pagesize"
          layout="prev, pager, next, sizes, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="pager"
        >
        </el-pagination>
      </el-card>

      <!-- 添加|修改 -->
      <directorys-add
        ref="directorysAdd"
        :data="currDirectory"
        @updateList="updateList()"
      ></directorys-add>
    </div>
  </div>
</template>

<script>
import { list as getCompanys } from "@/api/hmmm/companys";
import { list as getQuestion } from "@/api/hmmm/questions";
import { list, changeState, remove } from "@/api/hmmm/directorys";
import DirectorysAdd from "../components/directorys-add";

export default {
  components: { DirectorysAdd },
  created() {
    getCompanys();
    getQuestion();
    this.getList();
  },
  data() {
    return {
      params: {
        page: 1,
        pagesize: 10,
        directoryName: null
      },
      directorysList: [],
      total: 0,
      currDirectory: {}
    };
  },
  computed: {
    subject() {
      return this.$route.query || {};
    }
  },
  watch: {
    "$route.query": function() {
      this.getList();
    }
  },
  methods: {
    openDialog(directory = {}) {
      this.currDirectory = directory;
      this.$nextTick(() => {
        this.$refs.directorysAdd.open();
      });
    },
    // 切换状态
    async toggleState(directory) {
      await changeState({
        id: directory.id,
        state: directory.state === 1 ? 0 : 1
      });
      this.$message.success("操作成功");
      directory.state = directory.state === 1 ? 0 : 1;
    },
    // 删除
    async deleteDir(directory) {
      await this.$confirm("此操作将永久删除该目录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      });
      await remove(directory);
      this.$message.success("删除成功");
      this.getList();
    },
    // 目录列表
    async getList() {
      this.params.subjectID = this.subject.id || null;
      const { data } = await list(this.params);
      this.directorysList = data.items;
      this.total = data.counts;
    },
    // 切换条数
    handleSizeChange(size) {
      this.params.page = 1;
      this.params.pagesize = size;
      this.getList();
    },
    // 切换分页
    pager(np) {
      this.params.page = np;
      this.getList();
    },
    // 清除
    clear() {
      this.params = {
        directoryName: null,
        state: null,
        page: 1,
        pagesize: 10
      };
      this.getList();
    },
    // 搜索
    onSubmit() {
      this.params.page = 1;
      this.getList();
    },
    // 新增|修改 后更新列表
    updateList() {
      if (!this.currDirectory.id) {
        this.params.page = 1;
      }
      this.getList();
    }
  }
};
</script>

<style scoped></style>
